<template>
  <div class="app-container">
    <el-tabs v-model="activeName">
      <el-tab-pane
        v-for="(wechatItem, index) in wechatList"
        :key="index"
        :label="wechatItem.title"
        lazy
        :name="index"
      >
        <div class="Grid--flexCells mt-4">
          <div class="Grid-cell">
            <!-- form表单 -->
            <div class="mr-20">
              <el-form :model="wechatItem" label-width="120px">
                <el-form-item label="方案可见时间">
                  <el-select
                    v-model="wechatItem.days"
                    placeholder="请选择方案可见时间"
                    style="width: 320px"
                  >
                    <el-option label="全部" :value="9999" />
                    <el-option label="24小时" :value="1" />
                    <el-option label="72小时" :value="3" />
                    <el-option label="一周内" :value="7" />
                    <el-option label="半月内" :value="15" />
                    <el-option label="一月内" :value="30" />
                    <el-option label="半年内" :value="180" />
                    <el-option label="一年内" :value="365" />
                  </el-select>
                </el-form-item>
                <el-form-item label="个性签名">
                  <el-input
                    v-model="wechatItem.profiles"
                    type="textarea"
                    onkeydown="if(event.keyCode == 32 || event.keyCode == 13)return false;"
                    rows="5"
                    style="width: 320px"
                  />
                </el-form-item>
                <el-form-item label="公众号自动回复">
                  <el-input v-model="wechatItem.messages" type="textarea" style="width: 320px" />
                </el-form-item>
                <el-form-item label="模版 海报类型">
                  <div
                    v-for="(item, index) in typeList"
                    style="text-align: center"
                    class="mr-5"
                    :key="'template' + index"
                    @click="wechatItem.template = index"
                  >
                    <el-image
                      :class="wechatItem.template == index ? 'active' : ''"
                      style="width: 82px"
                      :src="item.img"
                      fit="scale-down"
                    />
                    <div>{{ item.name }}</div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit(wechatItem)">保存</el-button>
                  <!-- <el-button>复制推广链接</el-button> -->
                </el-form-item>
              </el-form>
            </div>
            <!-- 海报 -->
            <div>
              <div class="poster">
                <div class="poster_item">
                  <!-- 关闭 -->
                  <div class="close"></div>
                  <!-- 海报内容 -->
                  <div
                    :id="'screenshotTarget' + index"
                    class="screenshotTarget Grid--flexCells"
                    :style="{
                      backgroundImage:
                        'url(' + (wechatItem.template == 1 ? basketball : soccer) + ')'
                    }"
                  >
                  <div v-if="wechatItem.template != 1" style="padding: 30px 0px 0px 12px;">
                    <img
                      style="width: 24px;height: 34px;"
                      src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/logo.png"
                      alt=""
                    />
                    <img
                      style="margin-left:12px;width: 78px;height: 20px;"
                      src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/logo_text.png"
                      alt=""
                    />
                  </div>
                  <div v-else style="padding: 30px 0px 0px 12px;">
                    <img
                      style="width: 24px;height: 34px;"
                      src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/basketball_logo.png"
                      alt=""
                    />
                    <img
                      style="margin-left:12px;width: 78px;height: 20px;"
                      src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/basketball_logoText.png"
                      alt=""
                    />
                  </div>
                    <div style="position: absolute; top: 126px; width: calc(100% - 28px)">
                      <div
                        class="Grid--justifyCenter"
                        style="text-align: center; width: 100%; border-radius: 8px"
                      >
                        <el-image
                          class="qrcodeImg"
                          :class="template == 1 ? 'qrcodeImg_soccer' : 'qrcodeImg_basketball'"
                          :src="wechatItem.qrcode_url"
                          fit="scale-down"
                        />
                      </div>
                      <div style="text-align: center" class="mt-2">
                        <el-image class="tx_img" :src="avatar_url" alt="" />
                        <div class="gr_info">
                          <div
                            style="
                              font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                              font-weight: 600;
                              font-size: 22px;
                              color: #ffffff;
                              line-height: 32px;
                            "
                            class="mt-1"
                          >
                            {{ wechatItem.nickname }}
                          </div>
                          <!-- <div class="mt-2 text-overflow">{{wechatItem.profiles}}</div> -->
                        </div>
                        <div
                          style="
                            font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                            font-weight: 400;
                            font-size: 14px;
                            color: #ffffff;
                            line-height: 19px;
                          "
                          class="text-overflow mt-2"
                        >
                          {{ wechatItem.title }}
                        </div>
                      </div>
                    </div>
                    <div
                      style="
                        height: 60px;
                        position: absolute;
                        width: 100%;
                        left: 0;
                        bottom: 50px;
                        padding: 0 48px;
                      "
                      class="Grid Grid--center Grid--justifySpaceBetween"
                    >
                      <div class="Grid Grid--center">
                        <img
                          width="28px"
                          height="28px"
                          src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/save.png"
                          alt=""
                        />
                        <div
                          class="ml-3"
                          style="
                            width: 48px;
                            font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                            font-weight: 400;
                            font-size: 12px;
                            color: #ffffff;
                            line-height: 17px;
                          "
                        >
                          保存图片到相册
                        </div>
                      </div>
                      <div class="Grid Grid--center">
                        <img
                          width="28px"
                          height="28px"
                          src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/wechat_discern.png"
                          alt=""
                        />
                        <div
                          class="ml-3"
                          style="
                            width: 48px;
                            font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
                            font-weight: 400;
                            font-size: 12px;
                            color: #ffffff;
                            line-height: 17px;
                          "
                        >
                          长按识别二维码
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 下载按钮 -->
                  <div class="down">
                    <img @click="captureScreenshot" src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/poster/down.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="公众号B" lazy>
        <div></div>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
// import screenHeight from '@/utils/screen-height'
import html2canvas from 'html2canvas'
// import basketball from '@/assets/images/home_page/basketball.png'
// import soccer from '@/assets/images/home_page/soccer.png'
import { myWechats, setWechat } from '@/api/home-page/home-page'
import { useUserStoreHook } from '@/store/modules/user'
export default {
  name: 'HomePageIndex',
  components: {},

  data() {
    return {
      activeName: 0, //tabs
      wechatList: [], //公众号列表
      basketball: 'https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/basketball.png', //篮球
      soccer: 'https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/soccer.png', //足球
      avatar_url: '', //头像
      typeList: [
        { name: '足球', img: 'https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/basketball.png' },
        { name: '篮球', img: 'https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/home_page/soccer.png' }
      ]
    }
  },

  created() {
    this.initData()
    const userStore = useUserStoreHook()
    this.imageToBase64(userStore.user.avatar_url)
  },
  methods: {
    // 图片转换
    async imageToBase64(src) {
      const response = await fetch(`${src}?t=${new Date().getTime()}`)
      const blob = await response.blob()
      const reader = new FileReader()
      reader.onloadend = () => {
        this.avatar_url = reader.result
      }
      reader.readAsDataURL(blob)
    },
    isUrl(url) {
      // return import.meta.env.VITE_APP_BASE_URL+url
      return window.location.origin + '/' + url
    },
    // 提交
    onSubmit(item) {
      if (!item.template) item.template = '0'
      setWechat(item).then((res) => {
        if (res.code == 200) {
          ElMessage.success('保存成功')
        }
      })
    },
    // 数据初始化
    initData() {
      myWechats().then((res) => {
        if (res.code == 200) {
          this.wechatList = res.data.list
        }
      })
    },
    // 生成
    captureScreenshot() {
      const element = document.getElementById(`screenshotTarget${this.activeName}`)
      html2canvas(element).then((canvas) => {
        const imgData = canvas.toDataURL('image/png')
        this.imgData = imgData
        this.saveImage(imgData)
      })
    },
    // 保存下载图片
    saveImage(dataUrl) {
      const link = document.createElement('a')
      link.href = dataUrl
      link.download = 'screenshot.png'
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>
<style lang="scss" scoped>
.active {
  border: 2px dashed #578bd6;
  padding: 2px;
}
.poster {
  width: 100%;
  height: 100%;
  z-index: 999;
  .poster_item {
    position: relative;
    z-index: 9;
    display: inline-block;
  }
  .model {
    position: absolute;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    width: 100%;
    height: 100%;
  }
  .el-icon-close {
    position: absolute;
  }
  .close {
    background: rgba(0, 0, 0, 0.5);
    height: 20px;
    display: flex;
    align-items: center;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    & > img {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 10px;
      cursor: pointer;
    }
  }
  .down {
    background: rgba(0, 0, 0, 0.5);
    height: 50px;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    img {
      width: 30px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      cursor: pointer;
    }
  }
  .screenshotTarget {
    width: 375px;
    height: 522px;
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 0 14px;
    .gr_info {
      color: #fff;
      font-size: 20px;
      // max-width: calc(100% - 46px);
      margin-left: 6px;
      & > div:nth-child(2) {
        font-size: 12px;
      }
    }
    .qrcodeImg {
      width: 178px;
      height: 178px;
      border-radius: 8px;
      padding: 6px;
      ::v-deep .el-image__inner {
        border-radius: 8px;
      }
    }
    .qrcodeImg_soccer {
      background: rgba(211, 255, 224, 0.36);
    }
    .qrcodeImg_basketball {
      background: rgba(255, 235, 217, 0.5);
    }
  }
}
.text-overflow {
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出的内容 */
  text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
  font-size: 14px;
}
.tx_img {
  height: 68px;
  width: 68px;
  border-radius: 100%;
  ::v-deep .el-image__inner {
    object-fit: cover;
  }
}
</style>
